<template>
  <div class="goodsListNew">
    <view class="header_nav">
        
		  <view @click="goToSearch">
			<uv-input
			shape="circle"
			:customStyle="{width: '710rpx',background:'#F5F6F8',border:'none'}"
			placeholderClass="placeholderClassss"
		    placeholder="点击搜索相关商品"
		    prefixIcon="search"
		    prefixIconStyle="font-size: 32rpx;color: #909399"
		></uv-input>
		  </view>

		</view>




    <uv-vtabs 
	:height="computedHeight"
	   v-if="showtab"
			:chain="false"
			:list="list"
     :barItemActiveLineStyle="{background: 'red'}"
			:barItemBadgeStyle="{right:'20px',top:'12px'}"
			@change="change">
			<uv-vtabs-item>
				<div class="padding_box">
					<uv-sticky  offset-top="0">
					<div>
					<div class="top_item">
						<div :class="item.active?'active_tips':''" @click="checkGoods(item)" v-for="(item,index) in rightTopData" :key="index" class="box_item">{{ item.categoryName }}</div>
					</div>

					<div v-if="goodsList.length>0" class="pricefilter">
						<PaiShai @sortMethod="sortMethod"></PaiShai>
					</div>
				</div>
				</uv-sticky>
					<scroll-view @scrolltolower="scrolltolower" :scroll-y="true">
						<div @click.stop.prevent="gotoDetail(item)"  v-if="goodsList.length>0" v-for="(item,index) in goodsList" :key="index" style="position: relative;" class="godds_item">
							<view @click.stop='shopCarADD(item)' class="postion_a_text">查看详情 > </view>

							<view class="postion_a_text2">销量：{{ item.totalStocks }}</view>
							<image
							    style="width: 260rpx;height:150rpx;border-radius: 20rpx;margin-right: 20rpx;"
								:src="item.imgs"
								
							/>

							<div class="goods_right">
                               <view style="margin-top: 0rpx;font-size: 27rpx;width: 66%;" class="p_fonte_1">{{ item.prodName }}</view>
							   <view style="color: #858585;margin-bottom: 5rpx;">
							   <span style="padding: 5rpx 15rpx;background: #ebebeb;border-radius: 10rpx;font-size: 20rpx;			overflow: hidden;
    /* 超过了就显示省略号 */
    text-overflow: ellipsis;
    
   
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;">{{ item.brief }}</span>
							  </view>
							   <view class="p_fonte_1ss red">￥{{ item.price }}</view>
							   <view style="font-size: 19rpx;color: #858585;margin-top:10rpx;">{{ item.shopName }}</view>
							</div>
						</div>

						<div v-else>
					<uv-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png"></uv-empty>
				</div>
					</scroll-view>
				</div>
				
			</uv-vtabs-item>
		</uv-vtabs>

  </div>
</template>

<script setup>
import PaiShai from '../components/wang-PaiShai/wang-PaiShai.vue';
import { ref } from "vue";
import {pageProd,categoryInfo,getTodayGrab,tagProdList,recommendList,topNoticeList,indexImgs} from '../https/api/index'
import { onShow ,onReachBottom,onLoad} from "@dcloudio/uni-app";
let list = ref([
  {name:'123'},
  {name:'222'}
])



let shopCarADD = async(data) => {
	if(uni.getStorageSync('userInfo')){
		console.log(data)
         let obj = {
          basketId:0,
          count:1,
          prodId:data.prodId,
          shopId:data.shopId,
          skuId:data.skus[0].id
        }
        let res = await changeItem(obj)
        if(res.code ==='00000'){
          uni.showToast({
            title: '加入购物车成功',
         icon: 'none'
          })
        }
      }else{
		uni.showToast({
            title: '请先登录',
         icon: 'none'
          })
	  }
}

let showtab = ref(true)


let goToSearch = () => {
	uni.navigateTo({
		url: '/pages/searchPage'
	})
}

let change = async(data) => {

let resTopRight = await categoryInfo({parentId:list.value[data].categoryId})

rightTopData.value = resTopRight.data.map(v=>{
	return {
		...v,
       active:false,
	}
})
if(rightTopData.value.length > 0){
	rightTopData.value[0].active = true
checkGoods(rightTopData.value[0])
}else{
	goodsList.value = []
}

}

let orderBy = ref('')
let goodsList = ref([])

let chooseItem = ref({})
let checkGoods = async(item) => {
	chooseItem.value = item
	rightTopData.value.forEach(v=>{
		v.active = false
	})
	item.active = true
   let res = await pageProd({categoryId:item.categoryId,orderBy:orderBy.value})
   goodsList.value = res.data.records
}


let rightTopData = ref([])

let sortMethod = (str) => {
	orderBy.value = str
	checkGoods(chooseItem.value)
}


let scrolltolower = () => {
	console.log('scscsc')
}

let computedHeight =  ref(0)
onShow(async()=>{
	let screenHeight
	uni.getSystemInfo({
		success:(res)=>{
			screenHeight = res.screenHeight
         
		}
	})

	let boxHeight 
	uni.createSelectorQuery().select('.header_nav').boundingClientRect(data => {
		
		boxHeight = data.height	+ +192
		computedHeight.value = screenHeight - boxHeight
			}).exec()
			
			
	 console.log( computedHeight.value)
	showtab.value = false
	setTimeout(()=>{
		showtab.value = true
	},20)
	

let res = await categoryInfo({})
list.value = res.data.map(v=>{
	return {
		...v,
		name:v.categoryName
	}
})

let resTopRight = await categoryInfo({parentId:list.value[0].categoryId})

rightTopData.value = resTopRight.data.map(v=>{
	return {
		...v,
       active:false,
	}
})

rightTopData.value[0].active = true
checkGoods(rightTopData.value[0])

})


let gotoDetail = (item) =>{
	uni.setStorageSync('goodsDetailData',JSON.stringify(item))
	uni.navigateTo({
		url:'/pages/goodsDetail',

	})
}
</script>

<style lang="scss" scoped>
.goodsListNew{

}
.uv-vtabs__bar-item--value{
	color: black;
}

.header_nav{
	z-index: 20;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 20rpx;
	background: white;;
}

.padding_box{
	padding: 20rpx;
	padding-top:00rpx ;
}
.active_tips{
	font-weight: bold!important;;
	background: red !important;;
	color:white!important;
}
.top_item{
	
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.box_item{
		background: #f3f4f6;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		color: black;
		// background: white;
		border-radius: 20rpx;
		font-size:28rpx;
		box-shadow: 0upx 0upx 10upx #ddd;
		padding: 8rpx 15rpx;
		display: flex;
	justify-content: center;
	align-items: center;
	}


}


.godds_item{
	border-bottom: 1px solid #eee;
	.postion_a_text{
	z-index:999;
		color:red;
    position: absolute;
	right: 10rpx;
	bottom: 20rpx;
	padding: 4rpx 10rpx;
	background: white;
	font-size:20rpx;
	border-radius: 20rpx;
	}
	.postion_a_text2{
		color:#7f7f7f;
    position: absolute;
	right: 10rpx;
	top: 22rpx;
	padding: 4rpx 10rpx;
	background: white;
	font-size:20rpx;
	border-radius: 20rpx;
	}
	.p_fonte_1ss{
		font-size: 26rpx;
	}
	.red{
		color: red;
	}
	padding: 20rpx 0 ;
	display: flex;
	// align-items: center;
	.goods_right{
		width: 73%;
		position: relative;
		.p_fonte_1{
			margin-top: 0;
			margin-bottom: 5rpx;
			overflow: hidden;
    /* 超过了就显示省略号 */
    text-overflow: ellipsis;
    
    /* webkit内核的浏览器 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
}
</style>